<style scoped lang="less">
@import './style.less';
</style>

<template>
    <div class="tree-ex">
        <div v-if="treeTitle"
             class="tree-ex-title">
            {{treeTitle}}
        </div>
        <el-tree class="tree"
                 highlight-current
                 :node-key="nodeKey"
                 :data="data"
                 :expand-on-click-node="false"
                 :props="props"
                 :default-expanded-keys="defaultExpandedKeys"
                 @node-click="click">
        </el-tree>
        <div class="tree-footer">
            <div class="tree-footer-content">
                <span class="oper-item hand gray-hover"
                      v-for="oper in operations"
                      :key="oper.prop"
                      v-has="oper.auId"
                      @click="e => operation(oper)">
                    <i :class="oper.icon"></i>
                    <span class="oper-item-title">{{oper.label}}</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'treeEx',
        props: {
            treeTitle: '',
            data: {
                type: Array,
                default: () => []
            },
            nodeKey: {
                type: String,
                default: () => 'id'
            },
            defaultExpandedKeys: {
                type: Array,
                default: () => []
            },
            props: {
                type: Object,
                default: () => {}
            },
            operations: {
                type: Array,
                default: () => []
            },
            onNodeClick: {
                type: Function,
                default: () => {}
            },
            onOperation: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                title: 'treeTable'
            }
        },
        methods: {
            click(e) {
                this.onNodeClick(e)
            },
            operation(e) {
                this.onOperation(e)
            }
        }
    }
</script>

